<!-- 报名/签到/上传 成功后显示的界面 -->
<script setup lang="ts">
import router from '@/router'

// 该页面的类型，在路由跳转时传入
const type = ref<'报名' | '签到' | '上传照片' | null>()

onLoad((options) => {
  if (options && options.type) {
    type.value = options.type
    if (type.value === '报名')
      uni.setNavigationBarTitle({ title: '报名成功' })
    else if (type.value === '签到')
      uni.setNavigationBarTitle({ title: '签到成功' })
    else if (type.value === '上传照片')
      uni.setNavigationBarTitle({ title: '上传成功' })
  }
})

const title = computed(() => {
  if (type.value === '报名')
    return '报名成功'
  else if (type.value === '签到')
    return '签到成功'
  else if (type.value === '上传照片')
    return '上传成功'
})

/**
 * @description 退出页面
 */
function handleExit() {
  if (type.value === '上传照片') {
    router.back()
    return
  }

  router.replaceAll('home')
}

/**
 * @description 如果是报名成功，点击“去看看”时触发该函数，跳转到报名记录
 */
function handleViewRegistrationRecord() {
  router.replace('registrationRecord')
}
</script>

<template>
  <view v-if="type" class="min-h-screen bg-#F8FAFE">
    <view class="flex flex-col items-center bg-white">
      <Spacer height="50" />
      <view class="flex items-center">
        <image class="h-64rpx w-64rpx" src="@/static/images/checkmark_circle.png" />
        <Spacer width="24" />
        <view class="text-36rpx text-#333333 font-medium leading-50rpx">
          {{ title }}
        </view>
      </view>
      <Spacer height="66" />
      <view v-if="type === '报名'" class="flex items-center">
        <button class="h-80rpx w-230rpx flex items-center justify-center rounded-full bg-#F8F8F8 text-30rpx text-#333333 leading-42rpx" hover-class="bg-#ECECEC" @tap="handleExit">
          我知道了
        </button>
        <Spacer width="38" />
        <button class="h-80rpx w-230rpx flex items-center justify-center rounded-full bg-#0037AE text-30rpx text-white leading-42rpx" hover-class="bg-#3266D9" @tap="handleViewRegistrationRecord">
          去看看
        </button>
      </view>
      <view v-else class="flex items-center">
        <button class="h-80rpx w-498rpx flex items-center justify-center rounded-full bg-#0037AE text-30rpx text-white leading-42rpx" hover-class="bg-#3266D9" @tap="handleExit">
          我知道了
        </button>
      </view>
      <Spacer height="48" />
    </view>
  </view>
</template>

<route lang="yaml">
name: 'submitSuccess'
style:
  navigationBarTitleText: '立即报名'
layout: 'custom'
</route>
